<script setup lang="ts">
import { ref, watch } from "vue";
import type { FormItemProps } from "../utils/types.ts";
import { http } from "@/utils/http";
import { changeHttpLink } from "@/utils/test";
import { message } from "@/utils/message";

const props = defineProps<FormItemProps>();
const emit = defineEmits(["success"]);

const formRef = ref();
const form = ref<{
  id?: number;
  name?: string;
  cronExpression?: string;
  eventId?: number;
  eventName?: string;
  params?: string;
  status?: number;
  remark?: string;
  [key: string]: any;
}>({});

// 表单规则
const rules = {
  name: [
    {
      required: true,
      message: "请输入任务名称",
      trigger: "blur"
    }
  ],
  cronExpression: [
    {
      required: true,
      message: "请输入Cron表达式",
      trigger: "blur"
    }
  ],
  eventId: [
    {
      required: true,
      message: "请选择关联事件",
      trigger: "change"
    }
  ]
};

// 获取事件列表
const eventOptions = ref([]);
function getEvents() {
  http
    .post(changeHttpLink("/api/Events"), {
      data: { pageSize: 1000 }
    })
    .then((res: any) => {
      if (res.Success) {
        eventOptions.value = res.Data.Items.map(item => ({
          label: item.name,
          value: item.id
        }));
      }
    });
}

getEvents();

watch(
  () => props.form,
  val => {
    form.value = { ...val };
  },
  {
    immediate: true
  }
);

function submitForm() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      const params = { ...form.value };

      http
        .post(
          changeHttpLink(
            props.type === "新增"
              ? "/api/planTasks/create"
              : "/api/planTasks/update"
          ),
          {
            data: params
          }
        )
        .then((res: any) => {
          if (res.Success) {
            message(`${props.type}计划任务成功`, { type: "success" });
            emit("success");
          } else {
            message(res.Message, { type: "error" });
          }
        })
        .catch(err => {
          message(err.message, { type: "error" });
        });
    }
  });
}
</script>

<template>
  <el-form
    ref="formRef"
    :model="form"
    :rules="rules"
    label-width="120px"
    class="w-full"
  >
    <el-form-item v-if="props.type === '修改'" label="任务ID" prop="id">
      <el-input v-model="form.id" placeholder="任务ID" disabled />
    </el-form-item>
    <el-form-item label="任务名称" prop="name">
      <el-input v-model="form.name" placeholder="请输入任务名称" />
    </el-form-item>
    <el-form-item label="Cron表达式" prop="cronExpression">
      <el-input v-model="form.cronExpression" placeholder="请输入Cron表达式" />
    </el-form-item>
    <el-form-item label="关联事件" prop="eventId">
      <el-select v-model="form.eventId" placeholder="请选择关联事件">
        <el-option
          v-for="item in eventOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="参数" prop="params">
      <el-input
        v-model="form.params"
        placeholder="请输入参数"
        type="textarea"
      />
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-select v-model="form.status" placeholder="请选择状态">
        <el-option label="已启用" value="1" />
        <el-option label="已禁用" value="0" />
      </el-select>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input
        v-model="form.remark"
        placeholder="请输入备注"
        type="textarea"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm"> 确定 </el-button>
      <el-button @click="formRef.value.resetFields()"> 重置 </el-button>
    </el-form-item>
  </el-form>
</template>
